<template>
  <div
    class="art-list"
    ref="artList"
    :id="'art_' + index"
    @scroll="scrollEvent"
  >
    <van-pull-refresh v-model="refreshLoading" @refresh="refresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
        v-if="bol"
      >
        <div
          class="item"
          v-for="item in list"
          :key="item.art_id"
          @click="$router.push('/article?id=' + item.art_id)"
        >
          <h3 class="title">{{ item.title }}</h3>
          <div class="image">
            <img
              v-for="(i, index) in item.cover.images"
              :key="index"
              :style="{ width: (1 / item.cover.images.length) * 100 + '%' }"
              :src="i"
              alt=""
            />
          </div>

          <div class="other">
            <span>{{ item.aut_name }}</span>
            <span class="comment">{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate | formatDate }}</span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { articles } from '@/api/home'
import moment from 'moment'

moment.locale('zh-cn')
export default {
  props: {
    artId: {
      type: Number,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },

  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      refreshLoading: false,
      bol: true,
      scrollTop: 0
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    // async getData () {

    // },
    async load () {
      const res = await articles({
        channel_id: this.artId,
        timestamp: this.timestamp
      })
      //   res.data.data.pre_timestamp如果有值，就是下一页数据请求的参数值（timestamp），res.data.data.pre_timestamp为null表示 没有数据了也就是请求完成了
      this.list.push(...res.data.data.results)
      this.loading = false
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      } else {
        this.timestamp = res.data.data.pre_timestamp
      }

      console.log('getData', res)
    },
    refresh () {
      this.list = []
      this.loading = false
      this.finished = false
      this.timestamp = Date.now()
      this.refreshLoading = false
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    scrollEvent (e) {
      this.scrollTop = e.target.scrollTop
    },
    backScrollTop () {
      this.$refs.artList.scrollTop = this.scrollTop
    }
  },
  activated () {
    this.backScrollTop()
  }
}
</script>
<style lang="less" scoped>
.art-list {
  width: 100vw;
  position: fixed;
  left: 0;
  top: 90px;
  bottom: 50px;
  overflow: auto;
  padding: 0 15px;
  box-sizing: border-box;
  .item {
    .title {
      padding: 10px 0;
    }
    .image {
      display: flex;
      img {
        flex: 1;
        padding: 10px 8px;
        box-sizing: border-box;
      }
    }
    .other {
      color: #ccc;
      padding-bottom: 20px;
      .comment {
        padding: 0 15px;
      }
    }
  }
}
</style>
